<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this"><img class="icon"
                                    src="./static/icon/set.svg" style="margin-top: -2px;"/> 网站设置</li>
        <li><img class="icon"
                 src="./static/icon/pay.svg"/> 支付配置</li>
        <li><img class="icon" src="./static/icon/msg.svg"/> 消息配置</li>
        <li><img class="icon" src="./static/icon/login-set.svg"/> 登录配置</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">内容不一样是要有，因为你可以监听tab事件（阅读下文档就是了）</div>
        <div class="layui-tab-item">
            <div style="height:280px;min-width:1100px;width:1100px;margin:0 auto;">
                <div style="float:left;height:100px;width:100px;margin:10px 20px;">
                    <img src="./static/images/wx-logo.png" style="width:100%;height:100%;padding-top:5px;"/>
                </div>
                <div style="float:left;height:200px;width:600px;margin:10px 0 10px 50px;">
                    <form id="wechatPay">
                        <table style="text-align: right;line-height:40px;">
                            <tr>
                                <td class="font12">微信公众号AppId：</td>
                                <td>
                                    <input type="text" name="appId" lay-verify="title" autocomplete="off" placeholder="请输入AppId"
                                           class="layui-input h28 w200">
                                </td>
                            </tr>
                            <tr>
                                <td class="font12">微信公众号AppSecret：</td>
                                <td>
                                    <input type="text" name="appSecret" lay-verify="title" autocomplete="off"
                                           placeholder="请输入AppSecret" class="layui-input h28 w250">
                                </td>
                            </tr>
                            <tr>
                                <td class="font12">商户号ID：</td>
                                <td>
                                    <input type="text" name="mchId" lay-verify="title" autocomplete="off" placeholder="请输入商户号ID"
                                           class="layui-input h28 w200">
                                </td>
                            </tr>
                            <tr>
                                <td class="font12">商户支付密钥Key：</td>
                                <td>
                                    <input type="text" name="payKey" lay-verify="title" autocomplete="off" placeholder="请输入支付密钥Key"
                                           class="layui-input h28 w250"
                                </td>
                            </tr>
                            <tr>
                                <td class="font12">证书地址：</td>
                                <td>
                                    <input type="text" name="certPath" lay-verify="title" autocomplete="off"
                                           placeholder="请输入在服务器上的路径地址" class="layui-input h28 w250"
                                </td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td style="text-align: left;">
                                    <button id="saveWechatPay" type="button" class="layui-btn layui-btn-sm"
                                            style="height:28px;line-height: 28px;"
                                            index="0"><i
                                            class="layui-icon">&#xe605;</i>保存
                                    </button>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div style="float:left;height:250px;width:200px;margin:0 0 10px 20px;">
                    <img src="./static/images/wx-test-code.png" style="height:200px;width:200px;"/>
                    <div style="text-align: center">扫一扫测试微信支付</div>
                </div>
            </div>
            <div style="border-bottom: 1px solid #E7E7E7;"></div>
            <div style="min-width:1100px;width:1100px;margin:20px auto;height:230px;">
                <div style="float:left;height:100px;width:100px;margin:10px 20px;">
                    <img src="./static/images/zfb-logo.png" style="width:100%;height:100%;padding-top:5px;"/>
                </div>
                <div style="float:left;height:200px;width:600px;margin:10px 0 10px 60px;">
                    <form id="aliPay">
                        <table style="text-align: right;line-height:40px;">
                            <tr>
                                <td class="font12" style="width:135px;">应用AppId：</td>
                                <td><input type="text" name="appId" lay-verify="title" autocomplete="off" placeholder="请输入AppId"
                                           class="layui-input h28 w200"></td>
                            </tr>
                            <tr>
                                <td class="font12" valign="top">支付宝公钥：</td>
                                <td>
                    <textarea name="publicKey" placeholder="请输入公钥" class="layui-textarea"
                              style="width:450px;resize:none;min-height:90px;margin:8px 0;"></textarea>
                                </td>
                            </tr>
                            <tr>
                                <td class="font12" valign="top">RSA2私钥：</td>
                                <td><textarea name="privateKey" placeholder="请输入RSA2私钥" class="layui-textarea"
                                              style="width:450px;resize:none;min-height:150px;margin:8px 0;"></textarea>
                                </td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td style="text-align: left;">
                                    <button id="saveAliPay" type="button" class="layui-btn layui-btn-sm"
                                            style="height:28px;line-height: 28px;"
                                            index="1"><i class="layui-icon">&#xe605;</i>保存
                                    </button>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div style="float:left;height:250px;width:200px;margin:0 0 10px 20px;">
                    <img src="./static/images/zfb-test-code.png" style="height:200px;width:200px;"/>
                    <div style="text-align: center">扫一扫测试支付宝支付</div>
                </div>
            </div>
        </div>
        <div class="layui-tab-item">内容3</div>
        <div class="layui-tab-item">内容4</div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        //加载微信支付配置
        $.get(ctx + "/config/get", {name: "wechat_pay"}, function (res) {
            if (res.code == 0) {
                app.fullForm($("form#wechatPay"), res.data);
            }
        });


        //加载支付宝支付配置
        $.get(ctx + "/config/get", {name: "ali_pay"}, function (res) {
            if (res.code == 0) {
                app.fullForm($("form#aliPay"), res.data);
            }
        });

        //保存微信支付或阿里支付
        $(document).on("click", "button#saveWechatPay, button#saveAliPay", function () {
            var type = $(this).attr("index");
            var name = type == 0 ? "wechat_pay" : "ali_pay";
            var content = type == 0 ? app.serializeObject($("form#wechatPay")) : app.serializeObject($("form#aliPay"));
            $.post(ctx + "/config/update", {name: name, content: JSON.stringify(content)}, function (res) {
                if (res.code == 0) {
                    if (type == 0) {
                        app.tips("微信公众号支付配置更新成功!");
                    } else {
                        app.tips("支付宝支付配置更新成功!");
                    }
                }
            });
        });
    });
</script>